<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>SnapShotControl Documentation: Examples</title>
<link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-library.googlecode.com/svn/trunk/util/docs/template/local_extensions.css"></link>
    <script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
  </head>

  <body onload="prettyPrint()">
<h1>SnapShotControl Examples</h1>

<p>To use this library, create a SnapShotControl object and add this control to the map with the GMap2.addControl() method:</p>

<pre class="prettyprint">
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.676148, 139.74479), 1);

// add control
var snapShotControl = new SnapShotControl();
map.addControl(snapShotControl);
</pre>

<h2>Basic Example</h2>

<p>The following example shows using the SnapShotControl in the most basic way.</p
>
<pre class="prettyprint">
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.676148, 139.74479), 1);

// add control
var snapShotControl = new SnapShotControl();
map.addControl(snapShotControl);

// add maptype control
var menuMapTypeControl = new GMenuMapTypeControl();
map.addControl(menuMapTypeControl);

// add maptype
map.addMapType(G_PHYSICAL_MAP);

// add line
var latlngs = [];
latlngs.push(new GLatLng(35.676148, 139.74479));
latlngs.push(new GLatLng(25.48295117535531, 118.30078125));
latlngs.push(new GLatLng(-32.39851580247401, 135.17578125));
latlngs.push(new GLatLng(37.43997405227057, -121.9921875));
var line = new GPolyline(latlngs, "#FF0000", 10);
map.addOverlay(line);

// add markers
for (var i = 0; i &lt; latlngs.length; i++) {
  var marker = new GMarker(latlngs[i]);
  map.addOverlay(marker);
}
</pre>
<p><a href="../examples/simple.html">View example (simple.html)</a></p>


<h2>Advanced Example: Using Options</h2>

<p>This example lets you play with the various options in the constructor,
and see what the resulting map will look like.
</p>
<p><a href="../examples/optionsWizard.html">View example (optionsWizard.html)</a></p>

<h2>Using with Directions</h2>

<p>A common use case for this control may be to let users print a map of directions.
This example shows how to use the control to output a map of directions.
Since directions polylines can be quite long, it uses the encoded polyline option
to make sure that they fit within the URL length limit.
This example also shows how to specify different HTML for the control button.
</p>
<p><a href="../examples/directions.html">View example (directions.html)</a></p>

<h2>Auto-Detect Marker Styles</h2>

<p>The control will attempt to figure out the label, color, and size of a marker
based on the filename of its icon. For example, if you use a naming scheme for 
your icon filename like "markerA.png", then the control will place an "A"
in the static map. This behavior can be disabled with a boolean in the 
constructor.</p>

<p><a href="../examples/markerAutoDetect.html">View example (markerAutoDetect.html)</a></p>

<h2>Specifying Marker Styles</h2>

<p>Some icon filenames may not follow typical naming schemes, or perhaps
your markers aren't as simple as red/A, and you want a different rendering
in the static map. If you want to specify the style used for each marker when rendered in the
static map, then you can communicate the styles with the control by setting
properties on each marker object. The control will query to see if they exist,
and use them if provided.
</p>

<p><a href="../examples/markerStyles.html">View example (markerStyles.html)</a></p>

<h2>Specifying Poly Styles</h2>

<p>Developers do specify styles for GPolyline/GPolygon objects in the API,
but because the API does not allow accessors for those GPolyline/GPolygon styles,
the developer must specifically communicate the styles. Just like with marker
styles, the developer can specify styles by setting properties of each poly object.
If the API exposes style accessors in the future, this may no longer be
necessary.
</p>

<p><a href="../examples/polyStyles.html">View example (polyStyles.html)</a></p>


</body>
</html>
